<template>
  <div>
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon
          style="margin-right:15px"
          icon-class="list"
          :size="15"
        />数据列表
      </h5>
      <el-button
        v-if="$hasMethod('#add')"
        size="small"
        class="add-btn"
        icon="el-icon-plus"
        @click="openAddDialog()"
      >添加菜单</el-button>
    </div>
    <el-table
      :data="tableData"
      row-key="id"
      border
      :tree-props="{children: 'children'}"
    >
      <el-table-column
        align="center"
        label="展开"
      />
      <el-table-column
        align="center"
        label="排序"
        width="80"
      >
        <template slot-scope="scope">
          <!-- onkeyup="value=value.replace(/[^\d]/g,'')" -->
          <span v-if="!$hasMethod('#sort')">{{ scope.row.sort_num }}</span>
          <el-input
            v-else
            v-model="scope.row.sort_num"
            oninput="value=value.replace(/[^\d]/g,'')"
            max-length="9"
            @change="changeSort(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="ID"
        prop="id"
        width="80"
      />
      <el-table-column
        align="left"
        label="菜单名称"
      >
        <template slot-scope="scope">
          <p><span
            v-if="scope.row.pid != 0"
            style="margin:0 5px 0 20px;"
          >├─</span>{{ scope.row.label }}</p>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="控制器"
        prop="controller"
      />
      <el-table-column
        align="center"
        label="方法"
        prop="action"
      />
      <el-table-column
        align="center"
        label="路径"
        prop="path"
      />
      <el-table-column
        align="center"
        label="所属平台"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.type==1?'管理后台':scope.row.type==2?'供应商后台':'分销管理后台' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        width="70"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="$hasMethod('#enable')"
            class="pointer"
            :type="scope.row.status==1?'success':'danger'"
            @click="changeStatus(scope.row.id, scope.row.status)"
          >{{ scope.row.status==1?'启用':'禁用' }}</el-tag>
          <el-tag
            v-else
            :type="scope.row.status==1?'success':'danger'"
          >{{ scope.row.status==1?'启用':'禁用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        width="230"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            v-if="$hasMethod('#add')"
            size="mini"
            type="success"
            @click="openAddDialog(scope.row.id, 'add')"
          >添加子菜单</el-button>
          <el-button
            v-if="$hasMethod('#edit')"
            size="mini"
            type="primary"
            @click="openAddDialog(scope.row, 'edit')"
          >编辑</el-button>
          <el-button
            v-if="$hasMethod('#delete')"
            size="mini"
            type="danger"
            @click="removeItem(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <add-dialog
      ref="addDialog"
      :menu-list="tableData"
      :edit-item="editItem"
      @getList="getList"
    />
  </div>
</template>

<script>
import { getMenuList, setMenu, editMenu, delMenu } from '@/api/system'
import addDialog from './add'
export default {
  components: { addDialog },
  data() {
    return {
      tableData: [],
      editItem: null
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 删除
    removeItem(id) {
      this.$confirm('您确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        delMenu(id).then(res => {
          this.getList()
        })
      }).catch(() => { })
    },
    // 更改状态
    changeStatus(id, status) {
      let tip = ''; let title = ''
      if (status == 1) {
        tip = '您确定要禁用吗？'
        title = '禁用'
      } else {
        tip = '您确定要启用吗？'
        title = '启用'
      }
      this.$confirm(tip, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        setMenu({
          id,
          status: status == 1 ? 0 : 1
        }).then(res => {
          this.getList()
        })
      }).catch(() => { })
    },
    // 更改排序
    changeSort(item) {
      const params = {
        id: null,
        pid: null,
        title: '',
        controller: '',
        action: '',
        path: '',
        status: 1,
        type: 1,
        sort_num: 0
      }
      for (const key in params) {
        params[key] = item[key]
      }
      editMenu(params).then(res => {
        this.getList()
      })
    },
    // 添加/编辑菜单
    openAddDialog(val, type) {
      this.editItem = null
      if (type === 'add') {
        this.$refs.addDialog.form.pid = val
      } else if (val) {
        this.editItem = val
      }
      this.$refs.addDialog.dialogVisible = true
    },
    getList() {
      getMenuList().then(res => {
        this.tableData = res || []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
